⚡ 30 秒速记

• React 15 栈调和依赖同步递归
• 同层类型与键帮助判定身份
• 跨父级迁移不能只凭键保证保留状态
• 调和包括协调更新，差异比较只是其中环节
• 深度工作一旦开始难以让出主线程

栈调和把整段更新放在同步递归调用里完成，思路直接，但大树更新时不容易停下来。 它按同层类型和键寻找可复用节点，把新界面与当前界面协调一致。差异比较负责找变化，完整调和还涉及实例与宿主更新安排。因为工作进度依赖当前调用栈，长更新会推迟交互与绘制，这也是后来把进度保存到独立工作单元的重要动机。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

理解 React 15 的“栈调和”算法。

调和（Reconciliation）过程与 Diff 算法

“调和”又译为“协调”，协调过程的官方定义，藏在 React 官网对虚拟 DOM 这一概念的解释中，原文如下：

Virtual DOM 是一种编程概念。在这个概念里，UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫作协调（调和）。

我来划一下这段话里的重点：通过如 ReactDOM 等类库使虚拟 DOM 与“真实的” DOM 同步，这一过程叫作协调（调和）

说人话：调和指的是将虚拟 DOM映射到真实 DOM 的过程。因此严格来说，调和过程并不能和 Diff 画等号。调和是“使一致”的过程，而 Diff 是“找不同”的过程，它只是“使一致”过程中的一个环节

React 的源码结构佐证了这一点：React 从大的板块上将源码划分为了 Core、Renderer 和 Reconciler 三部分。其中 Reconciler（调和器）的源码位于src/renderers/shared/stack/reconciler这个路径，调和器所做的工作是一系列的，包括组件的挂载、卸载、更新等过程，其中更新过程涉及对 Diff 算法的调用。

所以说调和 !== Diff 这个结论，是站得住脚的，如果你持有这个观点，说明你很专业

但是！在如今大众的认知里，当我们讨论调和的时候，其实就是在讨论 Diff。

这样的认知也有其合理性，因为Diff 确实是调和过程中最具代表性的一环：根据 Diff 实现形式的不同，调和过程被划分为了以 React 15 为代表的“栈调和”以及 React 16 以来的“Fiber 调和”。在实际的面试过程中，当面试官抛出 Reconciliation 相关问题时，也多半是为了了解候选人对 Diff 的掌握程度。因此在本讲中，“栈调和”指的就是 React 15 的 Diff 算法。